<template>
  <div class="detail-app-info">
    <div class="info-item">
      <span class="label">开发者/发行商</span>
      <span class="value">{{ detailData.developer_name ? detailData.developer_name : '--' }}</span>
    </div>
    <div class="info-item">
      <span class="label">官网</span>
      <span
        :class="`value ${detailData.website && detailData.website.includes('http') ? 'website' : ''}`"
        @click="detailData.website && detailData.website.includes('http') && window.open(detailData.website, '_blank')"
      >{{ detailData.website && detailData.website.includes('http') ? detailData.website : '--' }}</span>
    </div>
    <div class="info-item">
      <span class="label">版本</span>
      <span class="value">{{ detailData.version ? detailData.version : '--' }}</span>
    </div>
    <div class="info-item">
      <span class="label">大小</span>
      <span class="value">{{ detailData.app_size && detailData.size_unit ? detailData.app_size + detailData.size_unit : '--' }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailAppInfo',
  props: {
    detailData: Object
  },
  data () {
    return {
      window
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail-app-info {
    .info-item {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: 45px;
      .label {
        color: #ccc;
        margin-right: 20px;
      }
      .value {
        color: #999;
        &.website {
          color: #0099ff;
          text-decoration: underline;
          cursor: pointer;
        }
      }
    }
  }
</style>